<template>
<transition name="fade">
  <div class="box">
    <header class="collect-header">
      <router-link tag="span" :class="item.icon" :to="item.path" v-for="(item, index) of list" :key="index"></router-link>
      <span>我的收藏</span>
    </header>
    <div class="collect-content">
      <ul class="collect-content-ul">
        <li v-for="(collect, collectindex) of collectlist" :key="collectindex">
          <div class="collect-content-ul-pro">
            <img :src="collect.pimg" alt="">
          </div>
          <p>{{collect.pname}}</p>
          <p>{{collect.pdesc}}</p>
          <p :class="collect.icon"></p>
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import Qs from 'qs'
import { Lazyload } from 'mint-ui'
Vue.use(Lazyload)
export default {
  data () {
    return {
      list: [
        {
          path: '/mine',
          icon: 'iconfont icon-fanhui2'
        }
      ],
      collectlist: [
        {
          pimg: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=178781303,2305128527&fm=26&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1800468699,4259202362&fm=26&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1800468699,4259202362&fm=26&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img1.imgtn.bdimg.com/it/u=3959312819,2905352934&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img5.imgtn.bdimg.com/it/u=31742388,2633035973&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img1.imgtn.bdimg.com/it/u=4207327390,508174321&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img0.imgtn.bdimg.com/it/u=2241076446,2362067026&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        },
        {
          pimg: 'http://img3.imgtn.bdimg.com/it/u=3456411476,3065749301&fm=11&gp=0.jpg',
          pname: '益智不倒玩具',
          pdesc: '锻炼小手灵活度',
          pprice: '29.9',
          icon: 'iconfont icon-shoucang1'
        }
      ]
    }
  },
  created () {
    let data = {
      token: '7qwN83Y2xI2xasQikfLHvwFwLQKxxk5wZyi6Ej+So2Vx1864is3FP2c+zr18HzNAC7fzHZHbmLDWwJraATqJ+cjyp9aSekyCKPoiVit0kHqEJYNu3/HhVAqSW1YJBo9GtG4aH2RSdJ194HC4Slo8wLMBKgvd61ZSGeyJJ80HEnPtUff6/csmpBFsSlXoVRN+DygYwJsRRi2im1HkL0zDJr9GL1nJSxfJLr2+3dEGuEGyDJYuS6aGVaSzY7BCGX2OBspUNJw5BuYR/t3hvUWPCYbfCSehfNHALihJVTJ39LLJ9d/uyc4ciyBA5ZbusTst'
    }
    axios({
      method: 'post',
      url: 'http://10.8.162.12:8081/minecollection.do',
      data: Qs.stringify(data)
    })
      .then((res) => {
        console.log(res)
      })
      .catch(function (error) {
        console.log(error)
      })
  }
}
</script>

<style lang="scss">
// 头部
.collect-header{
  width:3.75rem;
  height:0.42rem;
  line-height:0.42rem;
  background:rgb(252, 218, 218);
  text-align: center;
  span{
    &:nth-child(1){
     font-size:0.16rem;
     float:left;
     margin-left:0.15rem;
     font-weight: 700;
    };
    &:nth-child(2){
      display:block;
      font-size:0.14rem;
      float:left;
       margin-left:1.3rem;
    }
  }
}
// 商品展示部分
.collect-content{
  overflow-y:scroll;
  flex:1;
  .collect-content-ul{
      width:3.21rem;
      flex:1;
      background:0;
      margin-left:0.27rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        width:1.5rem;
        height:1.8rem;
        margin-top:0.14rem;
        margin-bottom:0.14rem;
        border-top-left-radius: 0.01rem;
        border-top-right-radius: 0.01rem;
      .collect-content-ul-pro{
           width:1.5rem;
           height:1rem;
           border-top-left-radius: 0.05rem;
           border-top-right-radius: 0.05rem;
           background:rgb(155, 38, 25);
           img{
               display: block;
               width:100%;
               height:100%;
               border-top-left-radius: 0.1rem;
               border-top-right-radius: 0.1rem;
             }
          }
       p{
         border:0;
       }
       p:nth-of-type(1){
           height:0.3rem;
           line-height:0.3rem;
           font-size:0.12rem;
           background:#F9F9F9;
        }
       p:nth-of-type(2){
          height:0.23rem;
          line-height:0.23rem;
          font-size:0.10rem;
          background:#F9F9F9;

        }
        p:nth-of-type(3){
          text-align: right;
          padding-right:0.1rem;
          height:0.3rem;
          line-height:0.3rem;
          font-size:0.24rem;
          background:#F9F9F9;
        }
      }
    }

}

</style>
